---
title: Στοιχείο Μενού
image: /εικόνες/οδηγός-χρήστη/kanban-προβολές/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Ένα ευέλικτο στοιχείο μενού σχεδιασμένο για χρήση σε μενού ή λίστα πλοήγησης.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες             | Τύπος           | Περιγραφή                                                                                                                                           |
| --------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| "LeftIcon"            | "IconComponent" | Ένα προαιρετικό αριστερό εικονίδιο που εμφανίζεται πριν το κείμενο στο στοιχείο μενού.                                              |
| τονισμός              | αλφαριθμητικό   | Καθορίζει το χρώμα προφοράς του στοιχείου του μενού. Επιλογές περιλαμβάνουν: `default`, `danger`, και `placeholder` |
| κείμενο               | αλφαριθμητικό   | Το περιεχόμενο κειμένου του στοιχείου μενού.                                                                                        |
| κουμπιάΕικονιδίων     | σειρά           | Ένα σύνολο αντικειμένων που αντιπροσωπεύουν πρόσθετα κουμπιά εικονιδίων που συνδέονται με το στοιχείο μενού                                         |
| είναιΆνοιγμαΣυμβουλής | boolean         | Ελέγχει την ορατότητα της συμβουλής που συνδέεται με το στοιχείο μενού                                                                              |
| testId                | αλφαριθμητικό   | Το attribute data-testid για σκοπούς δοκιμής                                                                                                        |
| κατά το κλικ          | συνάρτηση       | Συνάρτηση επανάκλησης που ενεργοποιείται όταν το στοιχείο μενού πατηθεί                                                                             |
| όνομαΚλάσης           | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                                                              |

</Tab>
</Tabs>

## Παραλλαγές

Οι διαφορετικές παραλλαγές του στοιχείου μενού περιλαμβάνουν τα εξής:

### Εντολή

Ένα στοιχείο μενού σε στυλ εντολής μέσα σε ένα μενού για να δείξει συντομεύσεις πληκτρολογίου.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες                      | Τύπος           | Περιγραφή                                                                                              |
| ------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------ |
| "LeftIcon"                     | "IconComponent" | Ένα προαιρετικό αριστερό εικονίδιο που εμφανίζεται πριν το κείμενο στο στοιχείο μενού. |
| κείμενο                        | αλφαριθμητικό   | Το περιεχόμενο κειμένου του στοιχείου μενού.                                           |
| firstHotKey                    | αλφαριθμητικό   | Η πρώτη συντόμευση πληκτρολογίου που συνδέεται με την εντολή                                           |
| δεύτεροΣυντόμευσΗΠληκτρολόγιΟυ | αλφαριθμητικό   | Η δεύτερη συντόμευση πληκτρολογίου που συνδέεται με την εντολή                                         |
| είναιΕπιλεγμένο                | boolean         | Δείχνει αν το στοιχείο μενού είναι επιλεγμένο ή επισημασμένο                                           |
| onClick                        | λειτουργία      | Συνάρτηση επανάκλησης που ενεργοποιείται όταν το στοιχείο μενού πατηθεί                                |
| όνομαΚλάσης                    | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                 |

</Tab>
</Tabs>

### Με δυνατότητα μεταφοράς

Ένα στοιχείο μενού με δυνατότητα μεταφοράς, σχεδιασμένο για να χρησιμοποιείται σε μενού ή λίστα όπου τα στοιχεία μπορούν να μεταφερθούν και να πραγματοποιηθούν πρόσθετες ενέργειες μέσω κουμπιών εικονιδίων.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες             | Τύπος           | Περιγραφή                                                                                                                   |
| --------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------- |
| "LeftIcon"            | "IconComponent" | Ένα προαιρετικό αριστερό εικονίδιο που εμφανίζεται πριν το κείμενο στο στοιχείο μενού.                      |
| τονισμός              | αλφαριθμητικό   | Το χρώμα τονισμού του στοιχείου μενού. Μπορεί να είναι είτε `προεπιλεγμένο`, `υποκατάστατο`, και `κίνδυνος` |
| κουμπιάΕικονιδίων     | σειρά           | Ένα σύνολο αντικειμένων που αντιπροσωπεύουν πρόσθετα κουμπιά εικονιδίων που συνδέονται με το στοιχείο μενού                 |
| είναιΆνοιγμαΣυμβουλής | boolean         | Ελέγχει την ορατότητα της συμβουλής που συνδέεται με το στοιχείο μενού                                                      |
| κατά το κλικ          | συνάρτηση       | Συνάρτηση επιστροφής κλήσης που ενεργοποιείται όταν ο σύνδεσμος κλικάρεται                                                  |
| κείμενο               | αλφαριθμητικό   | Το περιεχόμενο κειμένου του στοιχείου μενού.                                                                |
| isDragDisabled        | boolean         | Δείχνει αν η μεταφορά είναι απενεργοποιημένη                                                                                |
| όνομαΚλάσης           | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                                      |

</Tab>
</Tabs>

### Πολλαπλή Επιλογή

Παρέχει έναν τρόπο για την υλοποίηση δυνατότητας πολλαπλής επιλογής με ένα σχετιζόμενο πλαίσιο επιλογής.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες      | Τύπος           | Περιγραφή                                                                                              |
| -------------- | --------------- | ------------------------------------------------------------------------------------------------------ |
| "LeftIcon"     | "IconComponent" | Ένα προαιρετικό αριστερό εικονίδιο που εμφανίζεται πριν το κείμενο στο στοιχείο μενού. |
| κείμενο        | αλφαριθμητικό   | Το περιεχόμενο κειμένου του στοιχείου μενού.                                           |
| επιλεγμένο     | boolean         | Δείχνει αν το στοιχείο μενού είναι επιλεγμένο (επιλέγεται)                          |
| onSelectChange | λειτουργία      | Συνάρτηση επανάκλησης που ενεργοποιείται όταν η κατάσταση του πλαισίου επιλογής αλλάζει                |
| όνομαΚλάσης    | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                 |

</Tab>
</Tabs>

### Πολλαπλή Επιλογή Άβαταρ

Ένα στοιχείο μενού πολλαπλής επιλογής με ένα άβαταρ, ένα πλαίσιο επιλογής για επιλογή και κειμενικό περιεχόμενο.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες      | Τύπος         | Περιγραφή                                                                               |
| -------------- | ------------- | --------------------------------------------------------------------------------------- |
| άβαταρ         | `ReactNode`   | Το άβαταρ ή εικονίδιο που θα εμφανίζεται στην αριστερή πλευρά του στοιχείου μενού       |
| κείμενο        | αλφαριθμητικό | Το περιεχόμενο κειμένου του στοιχείου μενού.                            |
| επιλεγμένο     | boolean       | Δείχνει αν το στοιχείο μενού είναι επιλεγμένο (επιλέγεται)           |
| onSelectChange | συνάρτηση     | Συνάρτηση επανάκλησης που ενεργοποιείται όταν η κατάσταση του πλαισίου επιλογής αλλάζει |
| όνομαΚλάσης    | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ                                                  |

</Tab>
</Tabs>

### Πλοήγηση

Ένα στοιχείο μενού που διαθέτει προαιρετικό αριστερό εικονίδιο, κειμενικό περιεχόμενο, και εικονίδιο κέλτη στα δεξιά.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες   | Τύπος           | Περιγραφή                                                                                              |
| ----------- | --------------- | ------------------------------------------------------------------------------------------------------ |
| "LeftIcon"  | "IconComponent" | Ένα προαιρετικό αριστερό εικονίδιο που εμφανίζεται πριν το κείμενο στο στοιχείο μενού. |
| κείμενο     | αλφαριθμητικό   | Το περιεχόμενο κειμένου του στοιχείου μενού.                                           |
| onClick     | λειτουργία      | Λειτουργία επανάκλησης που ενεργοποιείται όταν γίνεται κλικ στο στοιχείο μενού.        |
| όνομαΚλάσης | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                 |

</Tab>
</Tabs>

### Επιλογή

Ένα επιλεγόμενο στοιχείο μενού, που διαθέτει προαιρετικό αριστερό περιεχόμενο (εικόνα και κείμενο) και έναν δείκτη (εικόνα ελέγχου) για την κατάσταση επιλογής.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες    | Τύπος           | Περιγραφή                                                                                              |
| ------------ | --------------- | ------------------------------------------------------------------------------------------------------ |
| "LeftIcon"   | "IconComponent" | Ένα προαιρετικό αριστερό εικονίδιο που εμφανίζεται πριν το κείμενο στο στοιχείο μενού. |
| κείμενο      | αλφαριθμητικό   | Το περιεχόμενο κειμένου του στοιχείου μενού.                                           |
| επιλεγμένο   | boolean         | Δείχνει αν το στοιχείο μενού είναι επιλεγμένο (επιλέγεται)                          |
| disabled     | boolean         | Δείχνει αν το στοιχείο μενού είναι απενεργοποιημένο                                                    |
| hovered      | boolean         | Indicates whether the menu item is currently being hovered over                                        |
| κατά το κλικ | συνάρτηση       | Λειτουργία επανάκλησης που ενεργοποιείται όταν γίνεται κλικ στο στοιχείο μενού.        |
| όνομαΚλάσης  | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                 |

</Tab>
</Tabs>

### Επιλογή Άβαταρ

Ένα επιλεγόμενο στοιχείο μενού με ένα άβαταρ, που διαθέτει προαιρετικό αριστερό περιεχόμενο (άβαταρ και κείμενο) και έναν δείκτη (εικόνα ελέγχου) για την κατάσταση επιλογής.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| Ιδιότητες    | Τύπος         | Περιγραφή                                                                                       |
| ------------ | ------------- | ----------------------------------------------------------------------------------------------- |
| άβαταρ       | `ReactNode`   | Το άβαταρ ή εικονίδιο που θα εμφανίζεται στην αριστερή πλευρά του στοιχείου μενού               |
| κείμενο      | αλφαριθμητικό | Το περιεχόμενο κειμένου του στοιχείου μενού.                                    |
| επιλεγμένο   | boolean       | Δείχνει αν το στοιχείο μενού είναι επιλεγμένο (επιλέγεται)                   |
| disabled     | boolean       | Δείχνει αν το στοιχείο μενού είναι απενεργοποιημένο                                             |
| hovered      | boolean       | Indicates whether the menu item is currently being hovered over                                 |
| testId       | αλφαριθμητικό | Το attribute data-testid για σκοπούς δοκιμής                                                    |
| κατά το κλικ | λειτουργία    | Λειτουργία επανάκλησης που ενεργοποιείται όταν γίνεται κλικ στο στοιχείο μενού. |
| όνομαΚλάσης  | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ                                                          |

</Tab>
</Tabs>

### Επιλογή Χρώματος

Ένα επιλεγόμενο στοιχείο μενού με ένα δείγμα χρώματος για σενάρια όπου θέλετε οι χρήστες να επιλέξουν ένα χρώμα από ένα μενού.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες    | Τύπος         | Περιγραφή                                                                                                                                                                                                                                              |
| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| χρώμα        | αλφαριθμητικό | Το χρώμα θέματος που θα εμφανιστεί ως δείγμα στο στοιχείο μενού. Οι επιλογές περιλαμβάνουν: `πράσινο`, `γαλαζοπράσινο`, `ουράνιο`, `μπλε`, `μοβ`, `ροζ`, `κόκκινο`, `πορτοκαλί`, `κίτρινο` και `γκρι`. |
| επιλεγμένο   | boolean       | Δείχνει αν το στοιχείο μενού είναι επιλεγμένο (επιλέγεται)                                                                                                                                                                          |
| disabled     | boolean       | Δείχνει αν το στοιχείο μενού είναι απενεργοποιημένο                                                                                                                                                                                                    |
| hovered      | boolean       | Indicates whether the menu item is currently being hovered over                                                                                                                                                                                        |
| "variant"    | αλφαριθμητικό | Η παραλλαγή του δείγματος χρώματος. Μπορεί να είναι είτε "default" είτε "pipeline".                                                                                                                                    |
| κατά το κλικ | λειτουργία    | Λειτουργία επανάκλησης που ενεργοποιείται όταν γίνεται κλικ στο στοιχείο μενού.                                                                                                                                                        |
| όνομαΚλάσης  | αλφαριθμητικό | Προαιρετική ονομασία για επιπλέον στυλ                                                                                                                                                                                                                 |

</Tab>
</Tabs>

### Εναλλαγή

Ένα στοιχείο μενού με μια σχετική διακόπτη εναλλαγής που επιτρέπει στους χρήστες να ενεργοποιήσουν ή να απενεργοποιήσουν μια συγκεκριμένη λειτουργία.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| Ιδιότητες                 | Τύπος           | Περιγραφή                                                                                                     |
| ------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------- |
| "LeftIcon"                | "IconComponent" | Ένα προαιρετικό αριστερό εικονίδιο που εμφανίζεται πριν το κείμενο στο στοιχείο μενού.        |
| κείμενο                   | αλφαριθμητικό   | Το περιεχόμενο κειμένου του στοιχείου μενού.                                                  |
| ενεργοποιημένο            | boolean         | Υποδηλώνει αν ο διακόπτης εναλλαγής είναι σε κατάσταση "ενεργοποιημένο" ή "απενεργοποιημένο". |
| κατά την αλλαγή εναλλαγής | συνάρτηση       | Λειτουργία επαναφοράς που ενεργοποιείται όταν αλλάζει η κατάσταση του διακόπτη εναλλαγής.     |
| μέγεθοςΕναλλαγής          | αλφαριθμητικό   | Το μέγεθος του διακόπτη εναλλαγής. Μπορεί να είναι είτε \                                    |
| όνομαΚλάσης               | αλφαριθμητικό   | Προαιρετική ονομασία για επιπλέον στυλ                                                                        |

</Tab>
</Tabs>
